<template>
    <div class="grow mt-4 mb-4 bg-white rounded-xl text-gray-500 flex flex-col" style="">
        <div class="flex justify-between p-3 border-b-2 items-end">
            <span class="text-gray-700">新歌首发</span>
            <el-space class="text-xs">
                <span class="pointer" v-for="(item, index) in styleList" @click="selNewSongStyle(item, index)">{{ item.name }}</span>
            </el-space>
        </div>
        <div class="grow p-3" style="overflow-y: auto;height: 0;scrollbar-width: none;">
            <el-row class="pointer mb-3" v-for="(item, index) in newSongList" :key="index" @click="playMusics(item)">
                <el-col :span="6" class="flex justify-center">
                    <el-image :src="baseUrl + item.image" class=" rounded-lg" style="width:60px;height:60px;" />
                </el-col>
                <el-col :span="12" class=" pl-3">
                    <div class="text-gray-700 mt-1">{{ item.title }}</div>
                    <div class="text-xs mt-2">{{ item.user.name }}</div>
                </el-col>
                <el-col :span="6" class="flex justify-center items-center text-xs">{{ timeFilter(item.views) }}</el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
import test from "@/assets/imgs/1.webp";
import { indexNewMusic, styleIndex } from "@/http/api";
import { ref, computed, onMounted, watch } from "vue";
import { add ,list } from '@/components/common/music';


const baseUrl = import.meta.env.VITE_API_URL;
const newSongList = ref([]);
const styleList = ref([]);
onMounted(() => {
    getNewMusic();
    getStyle();
});

const getNewMusic = async (e) => {
    const { data } = await indexNewMusic({
        style: e?.id,
    });
    newSongList.value = data.data;
    playMusuc(data);
};
const getStyle = async () => {
    const { data } = await styleIndex();
    styleList.value = data.style;
};

const selNewSongStyle = (e, i) => {
    //写切换的样式
    console.log(e)
    getNewMusic(e);
};

const playMusuc = (e) => {    
    list.value = [];
    e.data.forEach((item, index) => {
        list.value.push({
            name:item.title,
            author:item.user?.name,
            url:baseUrl +item.audio,
            image:baseUrl +item.image,
        })
    });
    //console.log(list)
}

const playMusics = (e) => {
    const music_list = {name:e.title,author:e.user?.name,url:baseUrl +e.audio,image:baseUrl + e.image};
    add(music_list)
}

const timeFilter = (e) => {
    let musucViews = "";
    if (e >= 1000) {
        musucViews = (e / 1000) + 'K';
    } else {
        musucViews = e;
    }
    return musucViews;
};
</script>